#{extends 'CRUD/layout.html' /}
#{set title:messages.get('crud.show.title', type.modelName) /}

<div id="crudShow" class="${type.name}">

    <h2 id="crudShowTitle">&{'crud.show.title', type.modelName}</h2>

    <div class="objectForm">
    #{form action:@save(object._key()), enctype:'multipart/form-data'}
        #{crud.form}
	    #{crud.custom 'tags'}
	        <label for="tags">
	            &{'tags'}
	        </label>
	        <style type="text/css">
		        .tags-list .tag {
		            cursor: pointer;
		            padding: 1px 4px;
		        }
		        .tags-list .selected {
		            background: #222;
		            color: #fff;
		        }
		    </style>
		    <script type="text/javascript">
		        var toggle = function(tagEl) {
		            var input = document.getElementById('h'+tagEl.id);
		            if(tagEl.className.indexOf('selected') > -1) {
		                tagEl.className = 'tag';
		                input.value = '';
		            } else {
		                tagEl.className = 'tag selected';
		                input.value = tagEl.id;
		            }
		        }
		    </script>
		    <div class="tags-list">
		        #{list items:models.Tag.findAll(), as:'tag'}
		           <span id="${tag.id}" onclick="toggle(this)" 
		                class="tag ${object.tags.contains(tag) ? 'selected' : ''}">
		               ${tag}
		           </span> 
		           <input id="h${tag.id}" type="hidden" name="${fieldName}" 
		                    value="${object.tags.contains(tag) ? tag.id : ''}" />
		        #{/list}
		    </div>
	    #{/crud.custom}
		#{/crud.form}
        <p class="crudButtons">
            <input type="submit" name="_save" value="&{'crud.save', type.modelName}" />
            <input type="submit" name="_saveAndContinue" value="&{'crud.saveAndContinue', type.modelName}" />
        </p>
    #{/form}
    </div>

    #{form @delete(object._key())}
        <p class="crudDelete">
            <input type="submit" value="&{'crud.delete', type.modelName}" />
        </p>
    #{/form}

</div>